<template>
  <div>
    <!--搜索添加区域-->
    <div>
      <div style="display: flex;justify-content: space-between">
        <div>
          <el-input placeholder="请输入员工姓名进行搜索，可以直接按回车搜索..." prefix-icon="el-icon-search"
                    @clear="initEmps"
                    style="width: 350px;margin-right: 10px"
                    v-model="searchValue.name"
                    @keydown.enter.native="initEmps"
                    :disabled="showAdvanceSearchView">
          </el-input>
          <el-button icon="el-icon-search" type="primary" @click="initEmps" :disabled="showAdvanceSearchView">搜索
          </el-button>
        </div>

        <!--上传下载数据区域-->
        <div>
          <el-upload :show-file-list="false"
                     :before-upload="beforeUpload"
                     :on-success="onSuccess"
                     :on-error="onError"
                     :disabled="importDataDisabled"
                     style="display: inline-flex;margin-right: 8px"
                     action="/employee/basic/import">
            <el-button :disabled="importDataDisabled" type="success" :icon="importDataBtnIcon">{{importDataBtnText}}
            </el-button>
          </el-upload>
          <el-button type="success" @click="exportData" icon="el-icon-download">导出数据</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="showAddEmpView">添加用户</el-button>
        </div>
      </div>

      <!--搜索条件区域-->
      <transition name="slide-fade">
        <div v-show="showAdvanceSearchView"
             style="border: 1px solid #409eff;border-radius: 5px;box-sizing: border-box;padding: 5px;margin: 10px;">
          <el-form ref="searchForm" :inline="true" :model="searchValue" style="margin-top: 20px">
            <el-row>
              <el-col :span="5">
                <el-form-item prop="politicId">
                  政治面貌：
                  <el-select v-model="searchValue.politicId" placeholder="政治面貌" size="mini" style="width: 130px;">
                    <el-option v-for="item in politicsStatus"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="nationId">
                  民族：
                  <el-select v-model="searchValue.nationId" placeholder="民族" size="mini" style="width: 130px;">
                    <el-option v-for="item in nations"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="posId">
                  职位：
                  <el-select v-model="searchValue.posId" placeholder="职位" size="mini" style="width: 130px;">
                    <el-option v-for="item in nations"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="jobLevelId">
                  职称：
                  <el-select v-model="searchValue.jobLevelId" placeholder="职称" size="mini" style="width: 130px;">
                    <el-option v-for="item in jobLevels"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item prop="tipTopDegree">
                  学历：
                  <el-select v-model="searchValue.tipTopDegree" placeholder="选择学历">
                    <el-option v-for="item in tipTopDegrees"
                               :key="item"
                               :label="item"
                               :value="item">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="5">
                <!--暂时没办法重置该项内容-->
                <el-form-item prop="departmentId">
                  所属部门:
                  <el-popover
                    placement="center"
                    title="请选择部门"
                    width="200"
                    trigger="manual"
                    v-model="popVisible2">
                    <el-tree ref="depTreeRef"
                             default-expand-all
                             :data="departments"
                             :props="defaultProps"
                             @node-click="searchViewHandleNodeClick">
                    </el-tree>
                    <div slot="reference"
                         style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                         @click="showDepartmentView2">{{inputDepartmentName}}
                    </div>
                  </el-popover>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item prop="engageForm">
                  聘用形式：
                  <el-radio-group v-model="searchValue.engageForm">
                    <el-radio label="劳动合同">劳动合同</el-radio>
                    <el-radio label="临时合同">临时合同</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item prop="beginDateScope">
                  入职日期：
                  <el-date-picker v-model="searchValue.beginDateScope"
                                  type="daterange"
                                  size="mini"
                                  unlink-panels
                                  value-format="yyyy-MM-dd"
                                  range-separator="至"
                                  start-placeholder="开始日期"
                                  end-placeholder="结束日期"
                                  :picker-options="pickerOptions">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="3">
                <el-form-item>
                  <el-button size="mini" icon="el-icon-refresh" @click="resetForm('searchForm')">重置</el-button>
                  <el-button size="mini" icon="el-icon-search" type="primary" @click="initEmps('advanced')">搜索
                  </el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </transition>
    </div>

    <!--列表展示-->
    <div style="margin-top: 10px">
      <el-table :data="emps"
                stripe
                border
                v-loading="loading"
                element-loading-text="正在加载..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" fixed align="left" label="姓名" width="90"></el-table-column>
        <el-table-column prop="workId" align="left" label="工号" width="100"></el-table-column>
        <el-table-column prop="gender" align="left" label="性别" width="50"></el-table-column>
        <el-table-column prop="birthday" align="left" label="出生日期" width="100"></el-table-column>
        <el-table-column prop="idCard" align="left" label="身份证号码" width="180"></el-table-column>
        <el-table-column prop="wedLock" label="婚姻状况" width="80"></el-table-column>
        <el-table-column prop="nation.name" label="民族" width="50"></el-table-column>
        <el-table-column prop="nativePlace" label="籍贯" width="50"></el-table-column>
        <el-table-column prop="politicsStatus.name" label="政治面貌"></el-table-column>
        <el-table-column prop="email" align="left" label="电子邮件" width="150"></el-table-column>
        <el-table-column prop="phone" align="left" label="电话号码" width="120"></el-table-column>
        <el-table-column prop="address" align="left" label="联系地址" width="200"></el-table-column>
        <el-table-column prop="department.name" align="left" label="所属部门" width="80"></el-table-column>
        <el-table-column prop="position.name" label="职位" width="100"></el-table-column>
        <el-table-column prop="jobLevel.name" label="职称" width="100"></el-table-column>
        <el-table-column prop="engageForm" align="left" label="聘用形式" width="100"></el-table-column>
        <el-table-column prop="tipTopDegree" align="left" label="最高学历" width="80"></el-table-column>
        <el-table-column prop="specialty" align="left" label="专业" width="150"></el-table-column>
        <el-table-column prop="school" align="left" label="毕业院校" width="150"></el-table-column>
        <el-table-column prop="beginDate" align="left" label="入职日期" width="100"></el-table-column>
        <el-table-column prop="conversionTime" align="left" label="转正日期" width="100"></el-table-column>
        <el-table-column prop="beginContract" align="left" label="合同起始日期" width="100"></el-table-column>
        <el-table-column prop="endContract" align="left" label="合同截止日期" width="100"></el-table-column>
        <el-table-column align="left" label="合同期限" width="100">
          <template slot-scope="scope">
            <el-tag>{{scope.row.contractTerm}}</el-tag>
            年
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button @click="showEditEmpView(scope.row)" style="padding: 3px" size="mini" icon="el-icon-edit">编辑
            </el-button>
            <el-button style="padding: 3px"
                       size="mini"
                       type="primary"
                       @click="showEmpMoreView(scope.row)">
              查看高级资料
            </el-button>
            <el-button @click="deleteEmp(scope.row)"
                       style="padding: 3px"
                       size="mini"
                       type="danger"
                       icon="el-icon-delete">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;justify-content: flex-end">
        <el-pagination
          background
          @current-change="currentChange"
          @size-change="sizeChange"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="total">
        </el-pagination>
      </div>
    </div>

    <!--添加或编辑信息-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="80%">
      <div>
        <el-form :model="employee" :rules="rules" ref="employeeForm">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名" prop="name">
                <el-input size="mini" style="width: 150px" prefix-icon="el-icon-edit" v-model="employee.name"
                          placeholder="请输入员工姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="employee.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期：" prop="birthday">
                <el-date-picker v-model="employee.birthday"
                                style="width: 150px"
                                size="mini"
                                value-format="yyyy-MM-dd"
                                placeholder="出生日期"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="政治面貌" prop="politicId">
                <el-select v-model="employee.politicId" placeholder="政治面貌" size="mini" style="width: 130px;">
                  <el-option v-for="item in politicsStatus"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="民族" prop="nationId">
                <el-select v-model="employee.nationId" placeholder="民族" size="mini" style="width: 150px;">
                  <el-option v-for="item in nations"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="籍贯" prop="nativePlace">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.nativePlace"
                          placeholder="请输入籍贯"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱" prop="email">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.email"
                          placeholder="请输入电子邮箱"
                          prefix-icon="el-icon-message">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="联系地址" prop="address">
                <el-input size="mini"
                          style="width: 200px"
                          v-model="employee.address"
                          placeholder="请输入联系地址"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="职位" prop="posId">
                <el-select v-model="employee.posId" placeholder="职位" size="mini" style="width: 150px;">
                  <el-option v-for="item in positions"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="职称" prop="jobLevelId">
                <el-select v-model="employee.jobLevelId" placeholder="职称" size="mini" style="width: 150px;">
                  <el-option v-for="item in jobLevels"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门" prop="departmentId">
                <el-popover placement="right"
                            title="请选择部门"
                            width="200"
                            trigger="manual"
                            v-model="popVisible">
                  <el-tree default-expand-all
                           :data="departments"
                           :expand-on-click="false"
                           @node-click="handleNodeClick"
                           :props="defaultProps">
                  </el-tree>
                  <div slot="reference"
                       style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                       @click="showDepartmentView">{{inputDepartmentName}}
                  </div>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="电话号码" prop="phone">
                <el-input size="mini"
                          style="width: 200px"
                          v-model="employee.phone"
                          placeholder="电话号码"
                          prefix-icon="el-icon-phone">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="工号" prop="workId">
                <el-input size="mini"
                          disabled
                          style="width: 200px"
                          v-model="employee.workId"
                          placeholder="工号"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="学历" prop="tipTopDegree">
                <el-select v-model="employee.tipTopDegree" placeholder="学历" size="mini" style="width: 150px;">
                  <el-option v-for="item in tipTopDegrees"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校" prop="school">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.school"
                          placeholder="毕业院校名称"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="专业名称" prop="sepcialty">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.specialty"
                          placeholder="请输入专业名称"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="入职日期:" prop="beginDate">
                <el-date-picker
                  v-model="employee.beginDate"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  placeholder="入职日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="转正日期:" prop="conversionTime">
                <el-date-picker
                  v-model="employee.conversionTime"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  placeholder="转正日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同起始日期:" prop="beginContract">
                <el-date-picker
                  v-model="employee.beginContract"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  placeholder="合同起始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同终止日期:" prop="endContract">
                <el-date-picker
                  v-model="employee.endContract"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  placeholder="合同终止日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证号码:" prop="idCard">
                <el-input size="mini" style="width: 180px" prefix-icon="el-icon-edit"
                          v-model="employee.idCard" placeholder="请输入身份证号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="聘用形式:" prop="engageForm">
                <el-radio-group v-model="employee.engageForm">
                  <el-radio label="劳动合同">劳动合同</el-radio>
                  <el-radio label="临时合同">临时合同</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况:" prop="wedLock">
                <el-radio-group v-model="employee.wedLock">
                  <el-radio label="已婚">已婚</el-radio>
                  <el-radio label="未婚">未婚</el-radio>
                  <el-radio label="离异">离异</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
     <!-- <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" type="info" @click="dialogVisible = false">取消</el-button>
        <el-button icon="el-icon-check" typeof="primary" @click="doAddEmployee" type="primary">确定</el-button>
      </span>-->
      <div align="center">
        <el-button icon="el-icon-close" type="info" @click="dialogVisible = false">取消</el-button>
        <el-button icon="el-icon-check" typeof="primary" @click="doAddEmployee" type="primary">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="title" :visible.sync="dialogVisible2" width="80%">
      <div>
        <el-form :model="employee">
          <el-row>
            <el-col :span="6">
              <el-form-item label="姓名：">
                <el-input disabled="true" size="mini" style="width: 150px" prefix-icon="el-icon-edit"
                          v-model="employee.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="性别：">
                <el-radio-group disabled="true" v-model="employee.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="出生日期：">
                <el-date-picker v-model="employee.birthday"
                                style="width: 150px"
                                size="mini"
                                value-format="yyyy-MM-dd"
                                placeholder="出生日期"
                                disabled="true"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="政治面貌：">
                <el-select disabled="true" v-model="employee.politicId" size="mini" style="width: 130px;">
                  <el-option v-for="item in politicsStatus"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6">
              <el-form-item label="民族：">
                <el-select disabled="true" v-model="employee.nationId" size="mini" style="width: 150px;">
                  <el-option v-for="item in nations"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="籍贯：">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.nativePlace"
                          disabled="true"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱：">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.email"
                          disabled="true"
                          prefix-icon="el-icon-message">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="联系地址：">
                <el-input size="mini"
                          style="width: 200px"
                          v-model="employee.address"
                          disabled="true"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="职位：">
                <el-select disabled="true" v-model="employee.posId" size="mini" style="width: 150px;">
                  <el-option v-for="item in positions"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="职称：">
                <el-select v-model="employee.jobLevelId" disabled="true" size="mini" style="width: 150px;">
                  <el-option v-for="item in jobLevels"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="所属部门：">
                <el-popover placement="right"
                            disabled="true"
                            width="200"
                            trigger="manual"
                            v-model="popVisible">
                  <el-tree default-expand-all
                           :data="departments"
                           :expand-on-click="false"
                           @node-click="handleNodeClick"
                           :props="defaultProps">
                  </el-tree>
                  <div slot="reference" disabled="true"
                       style="width: 130px;display: inline-flex;font-size: 13px;border: 1px solid #dedede;height: 26px;border-radius: 5px;cursor: pointer;align-items: center;padding-left: 8px;box-sizing: border-box;margin-left: 3px"
                       @click="showDepartmentView">{{inputDepartmentName}}
                  </div>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电话号码：">
                <el-input size="mini"
                          style="width: 200px"
                          v-model="employee.phone"
                          disabled="true"
                          prefix-icon="el-icon-phone">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="工号：">
                <el-input size="mini"
                          disabled
                          style="width: 200px"
                          v-model="employee.workId"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="学历：">
                <el-select v-model="employee.tipTopDegree" disabled="true" size="mini" style="width: 150px;">
                  <el-option v-for="item in tipTopDegrees"
                             :key="item"
                             :label="item"
                             :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="毕业院校：">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.school"
                          disabled="true"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="专业名称：">
                <el-input size="mini"
                          style="width: 150px"
                          v-model="employee.specialty"
                          disabled="true"
                          prefix-icon="el-icon-edit">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="入职日期：">
                <el-date-picker
                  v-model="employee.beginDate"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  disabled="true">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="转正日期:">
                <el-date-picker
                  v-model="employee.conversionTime"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  disabled="true">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同起始日期：">
                <el-date-picker
                  v-model="employee.beginContract"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  disabled="true">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同终止日期：">
                <el-date-picker
                  v-model="employee.endContract"
                  size="mini"
                  type="date"
                  value-format="yyyy-MM-dd"
                  style="width: 130px;"
                  disabled="true">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证号码：">
                <el-input size="mini" style="width: 180px"
                          prefix-icon="el-icon-edit"
                          v-model="employee.idCard"
                          disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="聘用形式：">
                <el-radio-group v-model="employee.engageForm" disabled="true">
                  <el-radio label="劳动合同">劳动合同</el-radio>
                  <el-radio label="临时合同">临时合同</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="婚姻状况：">
                <el-radio-group v-model="employee.wedLock" disabled="true">
                  <el-radio label="已婚">已婚</el-radio>
                  <el-radio label="未婚">未婚</el-radio>
                  <el-radio label="离异">离异</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div align="center">
        <el-button icon="el-icon-close" type="info" @click="dialogVisible2 = false">确定</el-button>
      </div>
      <!--<span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogVisible2 = false">确定</el-button>
      </span>-->
    </el-dialog>
  </div>
</template>

<script>
  const tipTopDegrees = ['本科', '大专', '硕士', '博士', '高中', '初中', '小学', '其他'];
  export default {
    name: 'EmpBasic',
    data() {
      return {
        emps: [],
        total: 0,
        searchValue: {
          page: 1,
          size: 10,
          name: '',
          school: null,
          politicId: null,
          nationId: null,
          jobLevelId: null,
          posId: null,
          engageForm: null,
          departmentId: null,
          beginDate: null,
          endDate: null,
          beginDateScope: null,
          tipTopDegree: null
        },
        employee: {
          name: "jokey",
          gender: "男",
          birthday: "1989-12-31",
          idCard: "610122199001011256",
          wedLock: "已婚",
          nationId: 1,
          nativePlace: "广东省",
          politicId: 13,
          email: "laowang@qq.com",
          phone: "18565558897",
          address: "深圳市南山区",
          departmentId: null,
          jobLevelId: 9,
          posId: 29,
          engageForm: "劳务合同",
          tipTopDegree: "本科",
          specialty: "信息管理与信息系统",
          school: "暨南大学",
          beginDate: "2017-12-31",
          workState: "在职",
          workId: "00000057",
          contractTerm: 2,
          conversionTime: "2018-03-31",
          notWorkDate: null,
          beginContract: "2017-12-31",
          endContract: "2019-12-31",
          workAge: null
        },
        title: '',
        tipTopDegrees,
        nations: [],
        jobLevels: [],
        politicsStatus: [],
        departments: [],
        positions: [],
        inputDepartmentName: '所属部门',
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        loading: false,
        popVisible: false,
        popVisible2: false,
        dialogVisible: false,
        dialogVisible2: false,
        showAdvanceSearchView: true,
        importDataBtnText: '导入数据',
        importDataBtnIcon: 'el-icon-upload2',
        importDataDisabled: false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        rules: {
          name: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          gender: [{required: true, message: '请输入性别', trigger: 'blur'}],
          birthday: [{required: true, message: '请输入出生日期', trigger: 'blur'}],
          idCard: [{required: true, message: '请输入身份证号码', trigger: 'blur'}, {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: '身份证号码格式不正确',
            trigger: 'blur'
          }],
          wedLock: [{required: true, message: '请输入婚姻状况', trigger: 'blur'}],
          nationId: [{required: true, message: '请选择所属民族', trigger: 'blur'}],
          nativePlace: [{required: true, message: '请输入籍贯', trigger: 'blur'}],
          politicId: [{required: true, message: '请输入政治面貌', trigger: 'blur'}],
          email: [{required: true, message: '请输入邮箱地址', trigger: 'blur'}, {
            type: 'email',
            message: '邮箱格式不正确',
            trigger: 'blur'
          }],
          phone: [{required: true, message: '请输入电话号码', trigger: 'blur'}],
          address: [{required: true, message: '请输入员工地址', trigger: 'blur'}],
          departmentId: [{required: true, message: '请输入部门名称', trigger: 'blur'}],
          jobLevelId: [{required: true, message: '请输入职称', trigger: 'blur'}],
          posId: [{required: true, message: '请输入职位', trigger: 'blur'}],
          engageForm: [{required: true, message: '请输入聘用形式', trigger: 'blur'}],
          tipTopDegree: [{required: true, message: '请输入学历', trigger: 'blur'}],
          specialty: [{required: true, message: '请输入专业', trigger: 'blur'}],
          school: [{required: true, message: '请输入毕业院校', trigger: 'blur'}],
          beginDate: [{required: true, message: '请输入入职日期', trigger: 'blur'}],
          workState: [{required: true, message: '请输入工作状态', trigger: 'blur'}],
          workId: [{required: true, message: '请输入工号', trigger: 'blur'}],
          contractTerm: [{required: true, message: '请输入合同期限', trigger: 'blur'}],
          conversionTime: [{required: true, message: '请输入转正日期', trigger: 'blur'}],
          notWorkDate: [{required: true, message: '请输入离职日期', trigger: 'blur'}],
          beginContract: [{required: true, message: '请输入合同起始日期', trigger: 'blur'}],
          endContract: [{required: true, message: '请输入合同结束日期', trigger: 'blur'}],
          workAge: [{required: true, message: '请输入工龄', trigger: 'blur'}]
        }
      };
    },
    mounted: function () {
      this.initEmps();
      this.initBasicData();
      this.initPositions();
    },
    watch: {},
    methods: {
      initEmps(type) {
        this.loading = true;
        if (type && type === 'advanced') {
          if (this.searchValue.beginDateScope) {
            this.searchValue.beginDate = this.searchValue.beginDateScope[0];
            if (this.searchValue.beginDateScope.length === 2) {
              this.searchValue.endDate = this.searchValue.beginDateScope[1];
            }
          }
        }
        this.postRequest('/employee/basic/page', this.searchValue).then(resp => {
          this.loading = false;
          if (resp && resp.status === 200) {
            let data = resp.obj;
            this.emps = data.list;
            this.total = data.total;
          }
        });
      },
      initBasicData() {
        //获取民族信息
        if (!window.sessionStorage.getItem("nations")) {
          this.getRequest('/employee/basic/nations').then(resp => {
            if (resp && resp.status === 200) {
              this.nations = resp.obj;
              window.sessionStorage.setItem('nations', JSON.stringify(this.nations));
            }
          });
        } else {
          this.nations = JSON.parse(window.sessionStorage.getItem('nations'));
        }
        //获取职称信息
        if (!window.sessionStorage.getItem("jobLevels")) {
          this.getRequest('/employee/basic/jobLevels').then(resp => {
            if (resp && resp.status === 200) {
              this.jobLevels = resp.obj;
              window.sessionStorage.setItem('jobLevels', JSON.stringify(this.jobLevels));
            }
          });
        } else {
          this.jobLevels = JSON.parse(window.sessionStorage.getItem('jobLevels'));
        }
        //获取政治面貌信息
        if (!window.sessionStorage.getItem("politicsStatus")) {
          this.getRequest('/employee/basic/politicsStatus').then(resp => {
            if (resp && resp.status === 200) {
              this.politicsStatus = resp.obj;
              window.sessionStorage.setItem('politicsStatus', JSON.stringify(this.politicsStatus));
            }
          });
        } else {
          this.politicsStatus = JSON.parse(window.sessionStorage.getItem('politicsStatus'));
        }
        //获取部门信息
        if (!window.sessionStorage.getItem("departments")) {
          this.getRequest('/employee/basic/departments').then(resp => {
            if (resp && resp.status === 200) {
              this.departments = resp.obj;
              window.sessionStorage.setItem('departments', JSON.stringify(this.departments));
            }
          });
        } else {
          this.departments = JSON.parse(window.sessionStorage.getItem('departments'));
        }
      },
      initPositions() {
        //获取职位信息
        if (!window.sessionStorage.getItem("positions")) {
          this.getRequest('/employee/basic/positions').then(resp => {
            if (resp && resp.status === 200) {
              this.positions = resp.obj;
              window.sessionStorage.setItem('positions', JSON.stringify(this.positions));
            }
          });
        } else {
          this.positions = JSON.parse(window.sessionStorage.getItem('positions'));
        }
      },
      sizeChange(currentSize) {
        this.searchValue.size = currentSize;
        this.initEmps();
      },
      currentChange(currentPage) {
        this.searchValue.page = currentPage;
        this.initEmps('advanced');
      },
      searchViewHandleNodeClick(data) {
        this.inputDepartmentName = data.name;
        this.searchValue.departmentId = data.id;
        this.popVisible2 = !this.popVisible2;
      },

      showAddEmpView() {
        this.emptyEmp();
        this.title = '添加员工';
        this.getMaxWorkId();
        this.dialogVisible = true;
      },
      doAddEmployee() {
        //编辑
        if (this.employee.id) {
          this.$refs.employeeForm.validate(valid => {
            if (valid) {
              this.putRequest('/employee/basic/', this.employee).then(resp => {
                if (resp) {
                  this.dialogVisible = false;
                  this.initEmps();
                }
              })
            }
          });
          //添加
        } else {
          this.$refs.employeeForm.validate(valid => {
            if (valid) {
              this.postRequest('/employee/basic/', this.employee).then(resp => {
                if (resp) {
                  this.dialogVisible = false;
                  this.initEmps();
                }
              });
            }
          });
        }
      },
      emptyEmp() {
        this.employee = {
          name: "",
          gender: "",
          birthday: "",
          idCard: "",
          wedLock: "",
          nationId: 1,
          nativePlace: "",
          politicId: 13,
          email: "",
          phone: "",
          address: "",
          departmentId: null,
          jobLevelId: 9,
          posId: 29,
          engageForm: "",
          tipTopDegree: "",
          specialty: "",
          school: "",
          beginDate: "",
          workId: "",
          contractTerm: 2,
          conversionTime: "",
          notWorkDate: null,
          beginContract: "",
          endContract: "",
          workAge: null
        };
        this.inputDepartmentName = '';
      },
      getMaxWorkId() {
        this.getRequest("/employee/basic/maxWorkId").then(resp => {
          if (resp) {
            this.employee.workId = resp.obj;
          }
        })
      },
      showEditEmpView(data) {
        this.initPositions();
        this.title = '编辑员工信息';
        this.employee = data;
        this.inputDepartmentName = data.department.name;
        this.dialogVisible = true;
      },
      showEmpMoreView(data) {
        this.title = '高级资料';
        this.employee = data;
        this.inputDepartmentName = data.department.name;
        this.dialogVisible2 = true;
      },
      deleteEmp(data) {
        this.$confirm('此操作将永久删除【' + data.name + '】，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: "warning"
        }).then(() => {
          this.deleteRequest('/employee/basic/' + data.id).then(resp => {
            if (resp && resp.status === 200) {
              this.initEmps();
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        })
      },
      showDepartmentView() {
        this.popVisible = !this.popVisible;
      },
      showDepartmentView2() {
        this.popVisible2 = !this.popVisible2;
      },
      handleNodeClick(data) {
        this.inputDepartmentName = data.name;
        this.employee.departmentId = data.id;
        this.popVisible = !this.popVisible;
      },
      onSuccess(response, file, fileList) {
        this.importDataBtnText = '导入数据';
        this.importDataBtnIcon = 'el-icon-upload2';
        this.importDataDisabled = false;
        //刷新列表
        this.initEmps();
      },
      onError(error, file, fileList) {
        this.importDataBtnText = '导入数据';
        this.importDataBtnIcon = 'el-icon-upload2';
        this.importDataDisabled = false;
      },
      beforeUpload() {
        this.importDataBtnText = '正在导入';
        this.importDataBtnIcon = 'el-icon-loading';
        this.importDataDisabled = true;
      },
      exportData() {
        window.open('/employee/basic/export', '_parent');
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        console.log("重置搜素条件....");
        //this.$refs.depTreedRef.setCheckedKeys([]);
        // console.log("重置部门树...")
      }
    }
  }
</script>

<style>

</style>
